<template>
  <div class="app-container">

    <el-form  :model="form" label-width="120px">
      <el-form-item label="" >
        讲师名称
        <el-input v-model="form.name" style="width: 200px"/>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        讲师头衔
        <el-select v-model="form.level" placeholder="请选择活动区域">>
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
        添加时间
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <el-date-picker
          v-model="form.dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="onCancel">置空</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="头衔" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.level==1?'高级讲师':scope.row.level==2?'首席讲师':"初级讲师" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资历" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.career }}
        </template>
      </el-table-column>
      <el-table-column label="排序"  prop="sort" width="110" align="center">
      </el-table-column>
      <el-table-column align="center"  label="入行时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.eduCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="修改时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.eduModified }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="入行时间" width="200">
        <template slot-scope="scope">
        <el-button type="primary" @click="update(scope.row.id)">修改</el-button>
        <el-button type="danger"  @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="3"
      :page-count="pagecount"
      @current-change="current"
    >
    </el-pagination>
    <el-dialog
      title="修改"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>
          <el-form ref="form" :rules="rules" :model="forme" label-width="120px">
        <el-form-item label="讲师名称" prop="name">
          <el-input v-model="forme.name" />
        </el-form-item>
        <el-form-item label="头衔" prop="level">
          <el-select v-model="forme.level" placeholder="请选择头衔">
            <el-option label="高级讲师" value="1"></el-option>
            <el-option label="首席讲师" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input v-model="forme.intro" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="image"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
          <!--
      v-show：是否显示上传组件
      :key：类似于id，如果一个页面多个图片上传控件，可以做区分
      :url：后台上传的url地址
      @close：关闭上传组件
      @crop-upload-success：上传成功后的回调 -->
          <image-cropper
            v-show="imagecropperShow"
            :width="300"
            :height="300"
            :key="imagecropperKey"
            url="teacher/seaveImg/123"
            lang-type="en"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmite('form')">立即添加</el-button>
          <el-button @click="onCancele">重置</el-button>
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>


</template>

<script>
import {getList, seave,  uploads,del} from '@/api/table'

import upload from "element-ui/packages/upload";
import ImageCropper from "@/components/ImageCropper/index.vue";
import PanThumb from "@/components/PanThumb/index.vue";

export default {
  components: { ImageCropper, PanThumb },
  computed: {
    upload() {
      return upload
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {

    return {
      centerDialogVisible:false,
      BASE_API: process.env.BASE_API, // 接口API地址
      imagecropperShow: false, // 是否显示上传组件
      imagecropperKey: 0, // 上传组件id
      image:'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
      forme:{
        id:0,
        name:'',
        level:'',
        intro:'',
        avatar:'',
      },
      rules:{
        name: [
          { required: true, message: '请输入姓名名称', trigger: 'blur' },
        ],
        level:[
          { required: true, message: '请选择头衔名称', trigger: 'blur' },
        ],
        intro:[
          { required: true, message: '请输入简历名称', trigger: 'blur' },
        ],
        avatar:[
          { required: true, message: '请选择头像名称', trigger: 'blur' },
        ],
      },

      form:{
        name:'',
        level:'',
        dates:[],
        pagenum:0,
      },
      total:0,
      pagecount:0,
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    onCancele(){
      this.forme={}
    },
    onSubmite(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          uploads(this.forme).then(response=>{
            if (response.code==20000){
              this.$message.success(response.message)
              this.$router.push("/teacher/list")
              this.centerDialogVisible=false
              this.fetchData()
              this.forme={}
            }else{
              this.$message.error(response.message)
            }
          })
        }
      });
    },

    cropSuccess(data) {
      console.log(data)
      this.forme.avatar=data
      this.imagecropperShow = false
      this.form.avatar = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    update(id){
      this.centerDialogVisible=true
      this.forme.id=id
    },
    del(id){
     del(id).then(res=>{
       if (res.code==20000){
         this.$message.success(res.message)
         this.fetchData()
       }else{
         this.$message.error(res.message)
       }
     })
    },
    current(val){
      this.form.pagenum=val
      this.fetchData();
    },
    onCancel(){
      this.form={}
    },
    onSubmit(){
      this.fetchData();
    },
    fetchData() {
        this.listLoading = true
        getList(this.form).then(response => {
        this.list = response.data.records
        this.form.pagenum=response.data.current
        this.pagecount=response.data.pages
        this.total=response.data.total
        this.listLoading = false
      })
    }
  }
}
</script>
